<template>
	<view>
		<view class="main-text-color-bai p-3" style="background-color: #bacae4;">
			<text v-if="detail.state==1">待付款</text>
			<text v-else-if="detail.state==2">待体检</text>
			<text v-else-if="detail.state==3">已完成</text>
		</view>
		
		<view class="order-top">
			<view class="order-no">订单编号：{{detail.ordernosub}}</view>
			<view class="order-time">
				<view class="init-time">下单日期：{{detail.time}}</view>
				<view class="final-time">有效期至：{{detail.totime}}</view>
			</view>
		</view>
		<view class="p-3 row j-start a-center ">
			<image src="../../static/dingwei.png" style="width: 32upx; height: 32upx;"></image>
			<text class="font-md">收货人：{{detail.uname}}</text>
			<text class="pl-5">{{detail.uphone}}</text>
			<text>收货地址：{{detail.uaddress}}</text>
		</view>
		<view class="main-bg-color-hui p-1">
			
		</view>
		<view class="p-3">
			<view class="row">
				<image style="width: 205upx;height: 145upx;" :src="baseUrl+detail.img"></image>
				<view class="ml-2">
					<view class="font-weight-6">{{detail.title}}</view>
					<view class="row j-sb a-center" style="width: 460upx;">
						<text class="main-text-color font-sm">
							￥
							<text class="font-md">{{detail.price}}</text>
						</text>
						<text style="color: #CCCCCC;">×{{detail.pay_number}}</text>
					</view>
				</view>
			</view>
			<!-- <view class="row py-2">
				<text class="font-weight-6">体检包含项目：</text>
				<view class="pl-5">
					<block v-for="(items,indexs) in detail.medical_items" :key="indexs">
						<view>{{items.medical_items}}</view>
					</block>
				</view>
			</view> -->
			<view class="main-bg-color-hui p-1"></view>
		</view>
		<view v-for="(items,indexs) in detail.medical_items" :key="indexs" @tap="showMore(indexs)">
			<view  class="agr-item">
				<view class="item-left">
					<view class="item-desc">
						<view v-if="items.state == 1" class="desc-finsh">
							未
						</view>
						<view v-if="items.state == 2" class="desc-nfinsh">
							已
						</view>
					</view>
					<view class="item-title">
						<view>
							{{items.medical_items}}
						</view>
					</view>
				</view>
				<view v-show="items.state == 2" class="item-time">
					<image v-show="!detail.medical_items[indexs].showMore" class="ml_20" src="../../static/o_r.jpg" mode=""></image>
					<image v-show="detail.medical_items[indexs].showMore" class="ml_20" src="../../static/o_d.jpg" mode=""></image>
				</view>
			</view>
			<view v-show="items.state == 2 && detail.medical_items[indexs].showMore" class="verif-item">
				<view class="verif-time">体检日期 : {{items.verif_time}}</view>
				<view class="verif-address">体检门店 : {{items.veri_address}}</view>
				<view class="verif-report" @tap.stop="toReport(items.veri_img)">点击查看报告</view>
			</view>
		</view>
		<!-- <view class="p-3" v-if="detail.sub==1">
			<view class="row">
				<image style="width: 205upx;height: 145upx;" :src="baseUrl+detail.img"></image>
				<view class="ml-2">
					<view class="font-weight-6">{{detail.title}}</view>
					<view class="row j-sb a-center" style="width: 460upx;">
						<text class="main-text-color font-sm">
							￥
							<text class="font-md">{{detail.price}}</text>
						</text>
						<text style="color: #CCCCCC;">×{{detail.pay_number}}</text>
					</view>
				</view>
			</view>
			<view class="row py-2">
				<text class="font-weight-6">体检包含项目：</text>
				<view class="pl-5">
					<block v-for="(items,indexs) in detail.medical_items" :key="indexs">
						<view>{{items.medical_items_attrname}}-{{items.medical_items_attrval}}</view>
					</block>
				</view>
			</view>
			<view class="main-bg-color-hui p-1"></view>
		</view>
		
		<view class="p-3" v-else-if="detail.sub==2">
			<block v-for="(item,index) in detail.subs" :key="index">
				<view class="row">
					<image style="width: 205upx;height: 145upx;" :src="baseUrl+item.img"></image>
					<view class="ml-2">
						<view class="font-weight-6">{{item.title}}</view>
						<view class="row j-sb a-center" style="width: 460upx;">
							<text class="main-text-color font-sm">
								￥
								<text class="font-md">{{item.price}}</text>
							</text>
							<text style="color: #CCCCCC;">×{{item.pay_number}}</text>
						</view>
					</view>
				</view>
				<view class="row py-2">
					<text class="font-weight-6">体检包含项目：</text>
					<view class="pl-5">
						<block v-for="(items,indexs) in item.medical_items" :key="indexs">
							<view>{{items.medical_items_attrname}}-{{items.medical_items_attrval}}</view>
						</block>
					</view>
				</view>
				<view class="main-bg-color-hui p-1"></view>
			</block>
		</view> -->
		<view class="px-3">
			<view class="border-bottom row j-sb py-2">
				<text class="font-weight-6">配送方式：</text>
				<text style="color: #C8C7CC;">电子编码，无配送</text>
			</view>
			<!-- <view class="border-bottom row j-sb py-2">
				<text class="font-weight-6">有效期至：</text>
				<text >2020-10-07</text>
			</view> -->
			<view class="border-bottom row j-sb py-2">
				<text class="font-weight-6">开具发票：</text>
				<text style="color: #C8C7CC;" v-if="detail.is_invoice==2">是</text>
				<text style="color: #C8C7CC;" v-else-if="detail.is_invoice==1">否</text>
			</view>
			<view class="border-bottom row j-sb py-2">
				<text class="font-weight-6">支付方式：</text>
				<text style="color: #C8C7CC;" v-if="detail.pay_style==1">支付宝</text>
				<text style="color: #C8C7CC;" v-else-if="detail.pay_style==2">微信</text>
			</view>
			<!-- <view class="row j-sb py-1">
				<text class="font-weight-6">商品金额：</text>
				<text style="color: #C8C7CC;">￥{{detail.price}}</text>
			</view> -->
			<view class="row j-sb py-1">
				<text class="font-weight-6">积分：</text>
				<text style="color: #C8C7CC;">使用{{detail.pay_score}}积分</text>
			</view>
			<view class="row j-sb py-1 mb-5 a-center">
				<text class="font-weight-6">总价：</text>
				<text class="main-text-color font-lg">￥{{detail.pay_fee}}</text>
			</view>
			<view class="row j-sb py-1">
				<text class="font-weight-6">订单号：</text>
				<text style="color: #C8C7CC;">{{detail.orderno}}</text>
			</view>
			<view class="row j-sb py-1">
				<text class="font-weight-6">下单时间：</text>
				<text style="color: #C8C7CC;">{{detail.time}}</text>
			</view>
		</view>
		<view class="row " v-if="detail.state==1">
			<button @tap="cancel(detail.id)" class="flex-1" style="color: #C8C7CC;">取消订单</button>
			<button @tap="topay(detail.id)" class="flex-1" style="background-color: #ff6101;color: #FFFFFF;">去付款</button>
		</view>
	</view>
</template>

<script>
	import request from '@/common/lib/request.js'
	import jweixin from '@/common/lib/jweixin.js'//1.6.0
	export default {
		data() {
			return {
				baseUrl:request.common.baseUrl,
				detail:''
			}
		},
		onLoad:function(option){
			uni.request({
				url: request.common.baseUrl+'/api/order/orderDetail',
				data: {
					id:option.id
				},
				header: {
					'Content-Type':'application/json;charset=UTF-8',
					'Content-Type':'application/x-www-form-urlencoded'
				},
				success: (res) => {
					if(res.data.code==200){
						this.detail=res.data.data
						this.detail.time = res.data.data.time.split(" ")[0]
						this.detail.totime = res.data.data.totime.split(" ")[0]
						this.detail.medical_items.forEach((val,i)=>{
							if(val.state == 2){
								this.$set(val,'showMore',false)
							}
						})
					}
				}
			});
		},
		methods: {
			showMore(i) {
				this.detail.medical_items[i].showMore = !this.detail.medical_items[i].showMore
			},
			toReport(img) {
				uni.navigateTo({
					url:'../agent/report?img='+img
				})
			},
			cancel(id){
				uni.request({
					url: request.common.baseUrl+'/api/order/cancel',
					data: {
						token:uni.getStorageSync('keyToken'),
						id:id
					},
					header: {
						'Content-Type':'application/json;charset=UTF-8',
						'Content-Type':'application/x-www-form-urlencoded'
					},
					success: (res) => {
						if(res.data.code==200){
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 2000
							});
							setTimeout(function () {
								uni.navigateBack({
									delta:2
								})
							}, 2000);
						}else{
							uni.showToast({
								title: res.data.msg,
								duration: 2000
							});
						}
					}
				});
			},
			topay(id){
				uni.request({
				    url: request.common.baseUrl+'/api/order/wtopay',
				    data: {
						openid:uni.getStorageSync('keyOpenid'),
						id:id
					},
				    header: {
						'Content-Type':'application/json;charset=UTF-8',
						'Content-Type':'application/x-www-form-urlencoded'
				    },
				    success: (res) => {
				        if(res.data.code==200){
							WeixinJSBridge.invoke(
								'getBrandWCPayRequest', {
									"appId": res.data.data.appId, //公众号名称，由商户传入
									"timeStamp":res.data.data.timeStamp, //时间戳     
									"nonceStr":res.data.data.nonceStr, //随机串     
									"package": res.data.data.package,
									"signType":res.data.data.signType, //微信签名方式：     
									"paySign":res.data.data.paySign //微信签名 
								},
								function(ress) {
									if (ress.err_msg == "get_brand_wcpay_request:ok") {
										uni.showToast({
											icon: 'none',
											title: '支付成功'
										})
										setTimeout(() => {
											uni.navigateBack({
												delta:2
											})
										}, 500);
									} else if (ress.err_msg == "get_brand_wcpay_request:cancel") {
										uni.showToast({
											icon: "none",
											title: "'已取消支付"
										})
									} else {
										uni.showToast({
											icon: "none",
											title: "支付失败"
										})
									}
								}
							);
							// jweixin.chooseWXPay({
							// 	nonceStr: res.data.data.nonceStr,
							// 	timestamp: res.data.data.timeStamp,
							// 	package: res.data.data.package,
							// 	signType: res.data.data.signType,
							// 	paySign: res.data.data.paySign,
							// 	success: () => {
							// 		uni.navigateBack({
							// 			delta:2
							// 		})
							// 	},
							// 	fail: err => {
							// 		// 支付失败
							// 	},
							// 	cancel: err => {
							// 		// 支付取消
							// 	}
							// });
						}
				    }
				});
			}
		}
	}
</script>

<style lang="less" scoped>
.order-top {
		padding: 30rpx;
		// border-bottom: 15rpx solid #f6f6f6;
		.order-no {
			font-size: 28rpx;
		}
		.order-time {
			display: flex;
			.init-time, .final-time{
				font-size: 24rpx;
			}
			.final-time{
				margin-left: 50rpx;
			}
		}
	}
	.agr-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 25rpx 40rpx 25rpx 40rpx;
		border-bottom: 1px dashed #e3e3e3;
		.item-left{
			display: flex;
			align-items: center;
			.item-title{
				margin-left: 20rpx;
				font-size: 28rpx;
				color: #333;
			}
			.item-desc{
				color: #FFFFFF;
				.desc-nfinsh {
					width: 44rpx;
					height: 44rpx;
					text-align: center;
					line-height: 44rpx;
					border-radius: 50%;
					background-color: #52c41a;
					font-size: 10px;
				}
				.desc-finsh {
					width: 44rpx;
					height: 44rpx;
					text-align: center;
					line-height: 44rpx;
					border-radius: 50%;
					background-color: #ff6f27;
					font-size:10px;
				}
			}
		}
		.item-time {
			image {
				width: 24rpx;
				height: 24rpx;
			}
		}
	}
	.verif-item {
		padding: 45rpx 70rpx;
		background-color: #f6f6f6;
		color: #666666;
		.verif-address {
			margin: 20rpx 0;
		}
		.verif-report {
			color: #0099cc;
			text-decoration: underline;
		}
	}
</style>
